<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue非父子组件传值(Bus/总线/发布订阅模式/观察者模式)</title>
</head>
<body>
  <script src="./js/vue2.js"></script>
  <div id="app">
    <child content="lafen"></child>
    <child content="liang"></child>
  </div>
</body>
</html>
<script>

  // 事件总线，通过一个空的vue实例来做总线，将其挂载到Vue的prototype中
  Vue.prototype.bus = new Vue();

  Vue.component('child', {
    data () {
      return {
        // 由于单向数据流的原因，需要将参数接受一下
        msg: this.content
      }
    },
    props: {
      content: String,
    },
    template:`
      <div @click="handleClick">{{msg}}</div>
    `,
    methods: {
      handleClick: function(){
        // 将事件通过bus属性发布出去，并且带上content 内容
        // bus也是一个vue实例，故也有$emit方法
        this.bus.$emit('change', this.msg);
      }
    },
    mounted () {
      var _this = this;
      this.bus.$on('change', function(msg){
        // 注意作用域的变化
        _this.msg=msg;
      });
    }
  })

  var vm = new Vue({
    el: '#app',

  });
</script>